<template>
  <div>
    <el-form :inline="true" :model="query" class="demo-form-inline">
      <el-form-item label="关键字">
        <el-input v-model="query.keyword" placeholder="关键字"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="initPageData">查询</el-button>
        <el-button type="primary" icon="el-icon-delete" @click="batchDelete"  size="medium">批量删除</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="showModal"  size="medium">新增</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="assignmentClue"  size="medium">分配线索</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="handleChangeBusiness"  size="medium">转化商机</el-button>
      </el-form-item>
    </el-form>
  <el-table
    :data="kq.data"
    border
    style="width: 100%"
    stripe
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="id"
      label="ID"
      width="100">
    </el-table-column>
    <el-table-column
      prop="full_name"
      label="全名"
      width="100">
    </el-table-column>
    <el-table-column
      prop="appellation"
      label="称呼"
      width="100">
    </el-table-column>
    <el-table-column
        prop="company"
        label="公司"
        width="100">
    </el-table-column>
    <el-table-column
        prop="job"
        label="职位"
        width="100">
    </el-table-column>
    <el-table-column
      prop="email"
      label="email"
      width="100">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="电话"
      width="100">
    </el-table-column>
    <el-table-column
        prop="mphone"
        label="移动电话"
        width="100">
    </el-table-column>
    <el-table-column
        prop="address"
        label="住址"
        width="100">
    </el-table-column>
    <el-table-column
        prop="source"
        label="客户来源"
        width="100">
    </el-table-column>
    <el-table-column
        prop="owner"
        label="销售人员"
        width="100">
    </el-table-column>
    <el-table-column
        prop="create_by"
        label="创建人"
        width="100">
    </el-table-column>
    <el-table-column
        prop="create_time"
        label="创建时间"
        width="100">
    </el-table-column>
    <el-table-column
        prop="edit_by"
        label="编辑人"
        width="100">
    </el-table-column>
    <el-table-column
        prop="edit_time"
        label="编辑时间"
        width="100">
    </el-table-column>
    <el-table-column
        prop="description"
        label="描述"
        width="100">
    </el-table-column>
    <el-table-column
        prop="contact_summary"
        label="最近一次跟进时间"
        width="100">
    </el-table-column>
    <el-table-column
        prop="next_contact_time"
        label="下一次跟进时间"
        width="100">
    </el-table-column>
    <el-table-column
      label="state">
      <template slot-scope="scope">
      <span v-if="scope.row.state==0" style="color:royalblue">未分配</span>
      <span v-if="scope.row.state==1" style="color:green">跟进中</span>
      <span v-if="scope.row.state==-1" style="color:red">放入线索池</span>
      <span v-if="scope.row.state==2" style="color:lime">已为商机</span>
      </template>
    </el-table-column>
    <el-table-column label="操作"width="250">
      <template slot-scope="scope">
        <el-button
            size="mini"
            @click="handleClueActivity(scope.$index, scope.row)">分配活动</el-button>
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    background
    @size-change="handleSizeChange"
    @current-change="currentChangeFunc"
    :current-page="query.currentPage"
    :page-size="query.pageNumber"
    :page-sizes="[10, 20, 50]"
    layout="total, sizes, prev, pager, next, jumper"
    :total=kq.total>
  </el-pagination>
<!--    转化商机-->
    <el-dialog title="转化商机" :visible.sync="businessFormVisible" :close-on-click-modal="false">
      <el-form :model="businessData" label-width="80px" :rules="clueFormRules" ref="clueActivity">
        <el-form-item label="名称" prop="name">
          <el-input v-model="businessData.clue.full_name" disabled auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="name">
          <el-input v-model="businessData.clue.phone" disabled auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="产品">
          <el-select v-model="businessData.product" clearable value-key="id" placeholder="请选择">
            <el-option
                v-for="item in products"
                :key="item.id"
                :label="item.name"
                :value="item">
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.price }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="businessFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="changeBusinessSubmit">提交</el-button>
      </div>
    </el-dialog>
<!--    分配线索-->
    <el-dialog title="分配线索" :visible.sync="assignmentClueFormVisible" v-loading="loading">
      <el-form :model="clueForm">
        <el-form-item label="称呼" label-width="200">
          <el-input disabled v-model="clueForm.appellation" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="email" label-width="200">
          <el-input disabled v-model="clueForm.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="销售人员" label-width="200">
          <!--          <el-input v-model="department.head" autocomplete="off"></el-input>-->
          <el-select v-model="clueForm.sales" clearable value-key="id" placeholder="请选择">
            <el-option
                v-for="item in employees"
                :key="item.id"
                :label="item.username"
                :value="item">
              <span style="float: left">{{ item.username }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.email }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="businessFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="clueAssignmentSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!--线索分配活动的弹出框   :visible.sync 用来控制弹出框是关闭还是打开的  true 打开  false 关闭 -->
    <el-dialog title="分配活动" :visible.sync="activityFormVisible" v-loading="loading">
      <el-form :model="clueActivity">
        <el-form-item label="参加活动" label-width="200">
            <el-checkbox-group v-model="clueActivity.activityIds">
              <el-checkbox v-for="act in activitys" :label="act.id">{{act.name}}</el-checkbox>
            </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="activityFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="clueActivitySubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!--新增/修改的弹出框   :visible.sync 用来控制弹出框是关闭还是打开的  true 打开  false 关闭 -->
    <el-dialog title="新增/修改" :visible.sync="dialogFormVisible" v-loading="loading">
      <el-form :model="clue">
        <el-form-item label="全名" label-width="200">
          <el-input v-model="clue.full_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="称呼" label-width="200">
          <el-input v-model="clue.appellation" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司" label-width="200">
          <el-input v-model="clue.company" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="职位" label-width="200">
          <el-input v-model="clue.job" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="email" label-width="200">
          <el-input v-model="clue.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" label-width="200">
          <el-input v-model="clue.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="移动电话" label-width="200">
          <el-input v-model="clue.mphone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="住址" label-width="200">
          <el-input v-model="clue.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="客户来源" label-width="200">
          <el-input v-model="clue.source" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="销售人员" label-width="200">
          <el-input v-model="clue.owner" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="下一次联系时间" label-width="200">
          <el-input v-model="clue.next_contact_time" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" label-width="200">
          <el-input v-model="clue.description" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="最近一次跟进的概述" label-width="200">
          <el-input v-model="clue.contact_summary" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" label-width="200">
          <el-radio-group v-model="clue.state">
            <el-radio class="radio" :label="0">未分配</el-radio>
            <el-radio class="radio" :label="1">跟进中</el-radio>
            <el-radio class="radio" :label="2">已为商机</el-radio>
            <el-radio class="radio" :label="-1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
       </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      clue:{
        id:null,
        full_name:"",
        appellation:"",
        company:"",
        job:"",
        email:"",
        phone:"",
        mphone:"",
        address:"",
        source:"",
        owner:"",
        state:"",
        create_by:"",
        create_time:"",
        edit_by:"",
        edit_time:"",
        description:"",
        contact_summary:"",
        next_contact_time:""
      },
      kq: {
        data:null,
        total:null
      },
      heart:[],
      employees:[],
      deptTree:[],
      query:{
        currentPage:1,
        pageNumber:10,
        keyword:"",
      },
      dialogFormVisible:false,

      //控制分配活动的弹窗
      activityFormVisible:false,
      loading:false,

      clueActivity:{
        clueId:null,
        activityIds:[]
      },
      activitys:[],

      //分配线索
      assignmentClueFormVisible:false,
      clueForm:{
        id:null,
        appellation:"",
        phone:"",
        sales:{
          id:null
        }
      },

      //转化商机
      products:[],
      businessFormVisible:false,
      businessData:{
        clue:{
          id:null,
          full_name:"",
          phone:""
        },
        product:{
          id:null,
          product_name:"",
          product_price:""
        }
      }
    }

  },
  methods:{
    //转化商机
    handleChangeBusiness(){
      if (this.heart.length != 1){
        this.showMessage(2,"分配失败，请重新选择一个线索分配！");
        return;
      }
      this.businessFormVisible=true
      this.businessData.clue=this.heart[0];
      this.getProduct();
    },
    //提交商机
    changeBusinessSubmit(){
      this.loading = true;  // 弹出加载框
      let param = Object.assign({},this.businessData);
      console.log(param)
      this.$http.post("/clue/clueBusiness",param)
          .then(result => {
            this.loading = false;
            result = result.data;
            if(result.success){
              this.businessFormVisible=false;
              this.showMessage(1,"保存成功!");
              this.query.currentPage = 1;
              this.initPageData();
              this.dialogFormVisible = false; // 关闭模态框
            }else{
              this.showMessage(2,"保存失败")
            }
          })
    },

    getProduct(){
      this.$http.get("/product")
          .then(result=>{
            var data = result.data;
            this.products=data.object;
            if (data.success){
              // this.showMessage(1,"获取部门领导成功！")
            }else {
              this.showMessage(2,"获取产品失败！")
            }
          })
          .catch(result=>{
            this.showMessage(2,"获取产品失败！")
          })
    },
    //分配线索
    assignmentClue(){
      //用户没有勾选线索就不给分配，这里我们做勾选一个的
      if (this.heart.length != 1){
        this.showMessage(2,"分配失败，请重新选择一个线索分配！");
        return;
      }
      this.assignmentClueFormVisible=true;
      this.clueForm=this.heart[0];
      this.getSales();
    },
    getSales(){
      this.$http.get("/employee")
          .then(result=>{
            var data = result.data;
            this.employees=data.object;
            if (data.success){
              // this.showMessage(1,"获取部门领导成功！")
            }else {
              this.showMessage(2,"获取活动失败！")
            }
          })
          .catch(result=>{
            this.showMessage(2,"获取活动失败！")
          })
    },

    clueAssignmentSubmit(){
      this.loading = true;  // 弹出加载框
      let param = Object.assign({},this.clueForm);
      console.log(param)
      this.$http.post("/clue/clueAssignment",param)
          .then(result => {
            this.loading = false;
            result = result.data;
            if(result.success){
              this.assignmentClueFormVisible=false;
              this.showMessage(1,"保存成功!");
              this.query.currentPage = 1;
              this.initPageData();
              this.dialogFormVisible = false; // 关闭模态框
            }else{
              this.showMessage(2,"保存失败")
            }
          })
    },

    //分配活动
    handleClueActivity(index,row){
        //打开弹窗
      this.activityFormVisible=true;
      this.clueActivity.clueId=row.id;
      this.$http.get("/activity")
          .then(result=>{
            var data = result.data;
            this.activitys=data.object;
            if (data.success){
              // this.showMessage(1,"获取部门领导成功！")
            }else {
              this.showMessage(2,"获取活动失败！")
            }
          })
          .catch(result=>{
            this.showMessage(2,"获取活动失败！")
          })
    },
    //分配活动提交
    clueActivitySubmit(){
      this.loading = true;  // 弹出加载框
      let param = Object.assign({},this.clueActivity);
      console.log(param)
      this.$http.post("/clue/clueActivity",param)
          .then(result => {
            this.loading = false;
            result = result.data;
            if(result.success){
              this.activityFormVisible=false;
              this.showMessage(1,"保存成功!");
              this.query.currentPage = 1;
              this.initPageData();
              this.dialogFormVisible = false; // 关闭模态框
            }else{
              this.showMessage(2,"保存失败")
            }
          })
    },
    handleSelectionChange(rows){  //获取批量删除的多有id
      this.heart=rows;
      console.log(this.heart)
    },

    handleEdit(index, row) {
      this.dialogFormVisible=true;
      this.clue= Object.assign({}, row);
      this.getHead();
      this.getClueTree();
    },
    //保存
    save(){
      this.loading = true;  // 弹出加载框
      // 1 判断字段的非空校验
      // 2 发起请求保存数据
      let param = Object.assign({}, this.clue);
      this.$http.put("/clue",param)
        .then(result => {
          this.loading = false;
          result = result.data;
          if(result.success){
            this.showMessage(1,"保存成功!");
            this.query.currentPage = 1;
            this.initPageData();
            this.dialogFormVisible = false; // 关闭模态框
          }else{
            this.showMessage(2,"保存失败")
          }
        })
    },


    //新增
    showModal(){
      // 新增前先清空上次的操作数据
      this.clue={
        id:null,
        full_name:"",
        appellation:"",
        company:"",
        job:"",
        email:"",
        phone:"",
        mphone:"",
        address:"",
        source:"",
        owner:"",
        state:"",
        create_by:"",
        create_time:"",
        edit_by:"",
        edit_time:"",
        description:"",
        contact_summary:"",
        next_contact_time:""
      }
      //弹出模态框
      this.dialogFormVisible=true;
    },

    //批量删除
    batchDelete(){
      //获取批量删除的所有id
      let ids = this.heart.map(map=>map.id);
      //先判断用户是否勾选了
      if (ids.length<1){
        //小于1就提示用户
        this.showMessage(2,"未选择！");
        return;
      }
      //提示用户是否要删除
      this.$confirm('此操作将永久删除数据, 是否继续?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { // 如果用户选择确定,就会走then这个方法
        // 4 如果选择确定,就发起删除请求
        console.log(ids)
        this.$http.patch("/clue",ids)
          .then(result=>{
            let data=result.data;
            if (data.success){
              this.showMessage(1,"删除成功");
              //删除后刷新数据
              this.query.currentPage=1;
              this.initPageData();
            }
          })
      }).catch(()=>{  //取消就进入这个方法
        this.showMessage(3,"取消成功")
      })
    },

    //删除
    handleDelete(index, row) {
      //获取id
      let id=row.id;
      //提示用户是否删除
      this.$confirm('此操作将永久删除数据, 是否继续?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { // 如果用户选择确定,就会走then这个方法
        // 4 如果选择确定,就发起删除请求
        this.$http.delete("/clue/"+id)
                  .then(result=>{
                    let data=result.data;
                    if (data.success){
                      this.showMessage(1,"删除成功");
                      //删除后刷新数据
                      this.query.currentPage=1;
                      this.initPageData();
                    }
                  })
      }).catch(()=>{  //取消就进入这个方法
          this.showMessage(3,"取消成功")
      })
    },
    showMessage(type,message){
      if(type == 1){
        this.$message({
          type: 'success',
          message: message
        });
      }else if(type == 2){
        this.$message({
          type: 'error',
          message: message
        });
      }else if(type == 3){
        this.$message({
          type: 'info',
          message: message
        });
      }
    },
    currentChangeFunc(val){
      this.query.currentPage=val;
      this.initPageData();
    },
    handleSizeChange(val){
      this.query.pageNumber=val;
      this.query.currentPage = 1;
      this.initPageData();
    },
    initPageData(){
      this.$http.post("/clue",this.query)
        .then(result=>{
          this.query.keyword=""
          let pageData = result.data;
         this.kq=pageData.object;
        }).catch(result=>{
          alert(result.message)
      })
    }
  },
  mounted() {
    this.initPageData()
  }
}
</script>
